<template>
  <div class="video-preview">
    <video :src="videoSrc" controls width="640" height="360" @click="playVideo">
      Your browser does not support the video tag.
    </video>
  </div>
</template>
 
<script>
export default {
  name: 'VideoPreview',
  props: {
    videoSrc: {
      type: String,
      required: true
    }
  },
  methods: {
    playVideo() {
      // 这里可以添加更多的逻辑，例如自动播放视频等
      const video = this.$el.querySelector('video');
      if (video) {
        video.play().catch(error => {
          console.error('Error attempting to play:', error);
        });
      }
    }
  }
}
</script>
 
<style scoped>
.video-preview video {
  width: 100%; /* 或者根据需要设置宽度 */
  height: auto; /* 根据视频的宽高比自动调整高度 */
}
</style>